<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="inclued/base.jsp" %>
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Book store</title>
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/font-awesome.css">
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/jquery.Jcrop.min.css">
</head>
<body>

	<div class="container" style="margin:20px auto">
		<div class="content">
        	<%@ include file="inclued/top.jsp" %>
        	
        	<ul class="breadcrumb">
	            <li><a href="index.jspx">首页</a> <span class="divider">/</span></li>
	            <li><a href="userinfo.jspx">用户中心</a> <span class="divider">/</span></li>
	            <li class="active">用户头像</li>
	        </ul>

	        <div class="container-fluid">

	        	<div class="row-fluid">
	        		<%@ include file="inclued/left.jsp" %>
	        		<div class="span9">
	        			<div class="page-header">
	        				<h4><i class="icon-list"></i> 修改头像</h4> 
	        			</div>
	        			
	        			<c:choose>
	        				<c:when test="${empty sessionScope.userpicpath }">
	        					<form action="userpic.jspx" method="post" enctype="multipart/form-data">
			        				请选择头像：<input type="file" name="userpic"/><br/>
			        				<input type="submit" value="上传"/>
			        			</form>
	        				</c:when>
	        				<c:otherwise>
	        					<img id="target" src="showImage.img?n=${sessionScope.userpicpath }"/>
	        					<form action="croppic.jspx" method="post">
									<input type="hidden" size="4" id="x" name="x" />
									<input type="hidden" size="4" id="y" name="y" />
									<input type="hidden" size="4" id="x2" name="x2" />
									<input type="hidden" size="4" id="y2" name="y2" />
									<input type="submit" value="裁剪"/>
								</form>
	        				</c:otherwise>
	        			</c:choose>
	        		</div>	
	        	</div>
	        	
				<footer>
	                <hr>
	                <p>© 2012 <a href="http://www.kaishengit.com" target="_blank">凯盛软件</a></p>
	            </footer>
				                    
	        
	        </div>
        </div>
	</div>
	<c:if test="${not empty sessionScope.userpicpath }">
	<script type="text/javascript" src="../js/jquery.js"></script>
	<script type="text/javascript" src="../js/jquery.Jcrop.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
		$('#target').Jcrop({
			onChange: showCoords,
			onSelect: showCoords,
			aspectRatio:1,
			maxSize:[200,200],
			minSize:[200,200],
			setSelect:[0,0,200,200]
		});
		  
		  function showCoords(c)
			{
				$('#x').val(c.x);
				$('#y').val(c.y);
				$('#x2').val(c.x2);
				$('#y2').val(c.y2);
			};
	});			
	
	</script>
		</c:if>
</body>
</html>

